<template>
	<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
	<el-dialog
			    v-model="dialogVisible_add"
			    title="Tips"
			    width="1000"
			  >
				<el-input type="text" v-model="name" placeholder="请输入添加的商品名"></el-input>
			    <el-input type="text" v-model="url" placeholder="请输入添加的图片url"></el-input>
			    <el-input type="text" v-model="price" placeholder="请输入添加的最低价格"></el-input>
			    <el-input type="text" v-model="num" placeholder="请输入添加的库存"></el-input>
				<el-tree-select
				   v-model="categoryvalue"
				   :data="categoryData"
				   :render-after-expand="false"
				   style="width: 240px"
				 >
				
				</el-tree-select>
				<div style="height:300px;">
					<el-tiptap v-model:content="info" :extensions="extensions" />
				</div>
				<!-- <el-select
				      v-model="categoryValue"
				      placeholder="请选择商品分类"
				      size="large"
				      style="width: 240px"
				    >
				      <el-option
				        v-for="item in options"
				        :key="item.id"
				        :label="item.name"
				        :value="item.id"
				      />
				    </el-select> -->
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button @click="dialogVisible_add = false">Cancel</el-button>
			        <el-button type="primary" @click="addSubmit">
			          Confirm
			        </el-button>
			      </div>
			    </template>
		</el-dialog>
	<el-dialog
		    v-model="dialogVisible_update"
		    title="Tips"
		    width="500"
		  >
		 
			<el-input type="text" v-model="name" placeholder="请输入修改的商品名字"></el-input>
		    <el-input type="text" v-model="url" placeholder="请输入修改的图片url"></el-input>
		    <el-input type="text" v-model="price" placeholder="请输入修改的最低价格"></el-input>
		    <el-input type="text" v-model="num" placeholder="请输入修改的库存"></el-input>
			 <el-tree-select
			    v-model="categoryvalue"
			    :data="categoryData"
			    :render-after-expand="false"
			    style="width: 240px"
			  />
			<div style="height:300px;">
				<el-tiptap v-model:content="info" :extensions="extensions" />
			</div>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_update = false">Cancel</el-button>
		        <el-button type="primary" @click="updateSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
		  <el-dialog
		    v-model="dialogVisible_del"
		    title="Tips"
		    width="500"
		  >
		    确认要删除 {{delName}} 吗？
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_del = false">Cancel</el-button>
		        <el-button type="primary" @click="delSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
	<el-table :data="tableData" style="width: 1200px;">
	  <el-table-column prop="name" label="商品名" width="180" />
	  <el-table-column label="图片">
		  <template #default="scope">
			  <img :src="scope.row.img" style="width:100px;height:100px;"></img>
		  </template>
	  </el-table-column>
	  <el-table-column prop="price" label="最低价格"></el-table-column>
	  <el-table-column prop="sale_cnt" label="库存"></el-table-column>
	  <el-table-column prop="createTime" label="创建时间" />
	  <el-table-column prop="updateTime" label="更新时间" />
			<el-table-column>
				<template #header>操作</template>
				<template #default="scope">
				  <el-button type="warning" @click="update(scope.row)">编辑</el-button>
				  <el-button type="danger" @click="del(scope.row.id,scope.row.name)">删除</el-button>
				</template>
			</el-table-column>
	</el-table>
</template>

<script setup>
	import {ref} from 'vue'
	const tableData = ref([])
	import {http} from "../components/http.js"
	import { Document, Image,Text, Paragraph, Heading, Bold, Underline, Italic, Strike, BulletList, OrderedList } from 'element-tiptap';
	
	const extensions = ref([
	Document, Text, Paragraph,Image,
	Heading.configure({ level: 5 }),
	Bold.configure({ bubble: true }),
	Underline.configure({ bubble: true, menubar: false }),
	Italic, Strike, BulletList, OrderedList,
	])
	
	const info = ref('');
	function query(){
		http({url:"/queryGoods",method:"get"}).then(res=>{
			tableData.value = res.data.data
		})
	}
	query()
	const dialogVisible_add = ref(false)
	const dialogVisible_update = ref(false)
	const dialogVisible_del = ref(false)
	const updateId = ref(undefined)
	const delId = ref(undefined)
	const categoryData = ref([])
	const categoryvalue = ref(undefined)
	const name = ref("")
	const url = ref("")
	const price = ref(undefined)
	const num = ref(undefined)
	function add(){
		dialogVisible_add.value = true
		http({url:"/queryCategory",method:"get"}).then(res=>{
			dg(res.data.data)
			categoryData.value=res.data.data
		})
	}
	function dg(arr){
		arr.forEach(item=>{
			item.label = item.name
			item.value = item._id
			if(item.children){
				dg(item.children)
			}
		})
	}
	function addSubmit(){
		http({url:"/addGoods",method:"post",data:{name:name.value,url:url.value,price:price.value,num:num.value,categoryvalue:categoryvalue.value,info:info.value}}).then(res=>{
			dialogVisible_add.value = false
			query()
		})
	}
	const delName = ref("")
	function del(id,name){
		dialogVisible_del.value = true
		delId.value = id
		delName.value = name
	}
	function delSubmit(){
		http({url:"/delGoods?id="+delId.value,method:"get"}).then(res=>{
			dialogVisible_del.value = false
			query()
		})
	}
	const updateName = ref("")
	function update(r){
		dialogVisible_update.value = true
		updateId.value = r.id
		updateName.value = r.name
		name.value = r.name
		url.value = r.img
		num.value = r.sale_cnt
		price.value = r.price
		info.value = r.info
		http({url:"/queryCategory",method:"get"}).then(res=>{
			dg(res.data.data)
			categoryData.value=res.data.data
		})
		categoryvalue.value = r.categoryId
	}
	function updateSubmit(){
		http({url:'/updateGoods',method:"post",data:{goodsId:updateId.value,name:name.value,url:url.value,price:price.value,num:num.value,categoryvalue:categoryvalue.value}}).then(res=>{
			dialogVisible_update.value = false
			query()
		})
	}
</script>

<style>
	.ProseMirror {
	  padding: 10px;
	  border: 1px solid #ddd;
	  min-height: 100px;
	}
	/* 聚焦状态 */
	.ProseMirror:focus {
	  outline: none;
	}
</style>